<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>我加入的小组</span>
            </div>
            <div class="body">
                <div class="img">
                    <img src="@/assets/Group.png" alt="">
                </div>
                <div class="myteam">
                    <div class="teamName">
                        {{ myTeamList.title }}
                    </div>
                    <div class="creatTime">
                        <i class="el-icon-s-order"></i>创建于{{ myTeamList.createTime }}
                        <div>
                            <el-button round class="button" plain>查看详情</el-button>
                        </div>
                    </div>
                </div>
                <div class="more">
                    <span>查看更多</span>
                    <i class="el-icon-arrow-down"></i>
                </div>
            </div>
        </el-card>

    </div>
</template>

<script>
import { myTeam } from '@/api/team';
export default {
    name: 'myTeam',
    data() {
        return {
            myTeamList: {
                counting: null,
                createTime: "",
                id: 1,
                originatorId: "",
                status: "",
                summary: "",
                tag: null,
                teamPic: null,
                title: "",
            },
          
        }
    },
    props: {

    },
    components: {
    },
    mounted() {

    },
    created() {
        this.getMyTeam()
    },
    methods: {
        getMyTeam() {
            myTeam().then((res) => {
                this.myTeamList = res.data.data[0]
                console.log(this.myTeamList);
            }).catch((err) => {
                console.log(err);
            });
        },
       
    }

}
</script>

<style scoped lang="less">
.box-card {
    width: 28vw;
    height: 65vh;
    margin-left: 6vh;
    margin-top: 6vh;
    font-size: 22px;
    font-weight: 700;
    color: rgba(10, 22, 41, 1);
    border-radius: 24px;
    box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
    background-color: rgba(213, 237, 161, 1);

    .clearfix {
        padding: 2vh;
    }

    .img {
        width: 100%;
        background-color: rgba(244, 250, 232, 1);
        display: flex;
        justify-content: center;

        img {
            width: 50%;
        }
    }

    .myteam {
        background-color: rgba(244, 250, 232, 1);
        margin-top: -14px;

        .teamName {
            font-size: 24px;
            font-weight: 600;
            padding: 4vh;
            padding-bottom: 2vh;
            line-height: 26px;
            color: rgba(10, 22, 41, 1);
            text-align: center;
            vertical-align: top;
        }

        .creatTime {
            height: 12vh;
            font-size: 14px;
            font-weight: 500;
            line-height: 16px;
            color: rgba(125, 133, 146, 1);
            text-align: center;
        }

        .button {
            border-radius: 14px;
            background: rgba(13, 128, 120, 1);
            color: aliceblue;
            margin-top: 2vh;

        }
    }

    .more {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0px;
        line-height: 0px;
        color: rgba(13, 128, 120, 1);
        text-align: center;
        margin-top: 6vh;

        span {
            margin-right: 2vh;
        }
    }
}

:deep(.el-card__body, .el-main) {
    padding: 0;
}
</style>
